MERN Delete

Let's add a new table cell

App.js

<tbody>  {holidays.map((holiday) => {    return (      <tr key={holiday._id}>        <td> {holiday.name}</td>        <td>X</td>      </tr>    );  })}</tbody>

Let's add a function called delete holiday. It will do two things, make a call to our api to delete the holiday and then update our view to reflect our data

const deleteHoliday = (id) => {  fetch("/holidays/" + id, {    method: "DELETE",  }).then((response) => {    setHolidays(holidays.filter((day) => day._id !== id));  });};

Now we'll add a click event to our new td

gotcha in order to pass an argument in our click event we have to wrap our function inside an anonymous function

<td onClick={() => deleteHoliday(holiday._id)}>X</td>;